<template>
  <div style="width: 80%;margin-left: 10%">
<!--    <div style="text-align: center;margin-bottom: 50px">-->
<!--      <h1>叫号机管理</h1>-->
<!--    </div>-->
<!--    <h3 style="margin-left: 150px">基本信息</h3>-->
<!--    <Divider />-->
    <div>
      <template>
        <div class="title-style">员工信息维护</div>
        <Form :model="formItem" :label-width="80">
            <Row class="bench_search">
              <Col span="7" class="ivu-form-item-label">头像：</Col>
              <Col span="5">
                <img :src="showphoto" class="hd-img-responsive person-info-header"/>
                <Icon @click="updatePhoto" type="md-camera" size="20" style="position:absolute;z-index:100;left:190px;top: 130px"/>
              </Col>
            </Row>
          <Row class="bench_search">
            <Col span="7" class="ivu-form-item-label">姓名：</Col>
            <Col span="11" class="ivu-form-item-content">
              <Input v-model="formItem.name"></Input>
            </Col>
          </Row>
<!--          <Row class="bench_search">-->
<!--            <Col span="7" class="ivu-form-item-label">工号：</Col>-->
<!--            <Col span="11" class="ivu-form-item-content">-->
<!--              <Input v-model="formItem.number"></Input>-->
<!--            </Col>-->
<!--          </Row>-->
          <Row class="bench_search">
            <Col span="7" class="ivu-form-item-label">等级：</Col>
            <Col span="11" class="ivu-form-item-content">
              <Input v-model="formItem.grade"></Input>
            </Col>
          </Row>
          <Row class="bench_search">
            <Col span="7" class="ivu-form-item-label">称谓：</Col>
            <Col span="11" class="ivu-form-item-content">
              <Input v-model="formItem.appellation"></Input>
            </Col>
          </Row>
          <Row class="bench_search">
            <Col span="7" class="ivu-form-item-label">联系电话：</Col>
            <Col span="11" class="ivu-form-item-content">
              <Input v-model="formItem.phone"></Input>
            </Col>
          </Row>
          <div class="title-style">电子告知信息维护</div>
          <Row class="bench_search">
            <Col span="7" class="ivu-form-item-label">服务口号：</Col>
            <Col span="11" class="ivu-form-item-content">
              <Input v-model="formItem.slogan"></Input>
            </Col>
          </Row>
          <Row class="bench_search">
            <Col span="7" class="ivu-form-item-label">工作要求：</Col>
            <Col span="11" class="ivu-form-item-content">
              <Input v-model="formItem.requirement" type="textarea" :autosize="{minRows: 5,maxRows: 4}"></Input>
            </Col>
          </Row>
          <Row class="bench_search">
            <Col span="7" class="ivu-form-item-label">欢迎语：</Col>
            <Col span="11" class="ivu-form-item-content">
              <Input v-model="formItem.message" type="textarea" :autosize="{minRows: 5,maxRows: 4}"></Input>
            </Col>
          </Row>
          <div class="title-style">VIP服务年龄设置</div>
          <Row class="bench_search">
            <Col span="7" class="ivu-form-item-label">小于(单位：周岁)：</Col>
            <Col span="11" class="ivu-form-item-content">
              <Input v-model="formItem.small" type="number"></Input>
            </Col>
          </Row>
          <Row class="bench_search">
            <Col span="7" class="ivu-form-item-label">大于(单位：周岁)：</Col>
            <Col span="11" class="ivu-form-item-content">
              <Input v-model="formItem.large" type="number"></Input>
            </Col>
          </Row>
          <div class="title-style">评论等级设置</div>
          <Row class="bench_search">
            <Col span="7" class="ivu-form-item-label">最大星数：</Col>
            <Col span="11" class="ivu-form-item-content">
              <Input v-model="formItem.max_start" type="number"></Input>
            </Col>
          </Row>
          <Row class="bench_search">
            <Col span="7" class="ivu-form-item-label">默认星数：</Col>
            <Col span="11" class="ivu-form-item-content">
              <Input v-model="formItem.min_start" type="number"></Input>
            </Col>
          </Row>
          <div style="text-align: center;margin-top: 50px">
            <!--            <Button type="error" @click="submit" style="center" size="large">修改</Button>-->
            <Button type="primary" align="center" size="large" @click="preservation">保存</Button>
          </div>
        </Form>
      </template>
    </div>
    <Modal v-model="up_pic_mol" title="图片上传" :closable="false">
      <Upload multiple action="http://10.40.20.4:8081/api/uc/mzsc/uploadService/uploadPic" :before-upload="beforeUpload">
        <Button icon="ios-cloud-upload-outline">上传图片</Button>
        <span style="margin-left: 250px">请上传小于2M的图片</span>
      </Upload>
      <img :src="temp_photo" style="width: 100%"/>
    </Modal>
    <Modal v-model="face_mol" title="拍照" @on-visible-change="modalChange" width="700">
      <face-camera :isPlay="face_shows" :extraData="upPicData" :file-path="filePath"
                   :file-name="fileName" @img-result="imgResult"></face-camera>
      <div slot="footer">
        <Button type="error" @click="face_mol=false">关闭</Button>
      </div>
    </Modal>
    <Modal
      v-model="mshow"
      title="高拍仪"
      @on-visible-change="modalChange3"  @on-cancel="closeHeight1" @on-ok="closeHeight1">
      <wl-equipment
        :file-path="filePath"
        :file-name="fileName"
        v-model="obj"
        :type="type"
        :is-open="openNow"
        user_idcard="cardId"
        ref="wlEquipment"
        @change1="change1"
      ></wl-equipment>
      <!--      @change="geyImgUrl"-->
      <!--      @get_info="imgResult"-->
    </Modal>
  </div>
</template>

<script>
import nophoto from '@/assets/images/nophoto.jpeg'
import WlEquipment from '@/components/wl-equipment/index'
import FaceCamera from '@/components/face-camera/index'
import { createUpLoadFiles, getSign } from '@/api/common'
// import Gmk from '@/view/login/Gmk.vue'
import { getAdministrationn, saveAdministrationn } from '@/api/eventlist'
export default {
  name: 'index',
  components: { WlEquipment, FaceCamera },
  data () {
    return {
      param: {},
      nophoto,
      paramData: {
        name: '',
        // number: '',
        phone: '',
        grade: '',
        appellation: '',
        message: '',
        head_portrait: '',
        slogan: '',
        small: '',
        large: '',
        max_start: '',
        min_start: ''
      },
      formItem: {
        name: '',
        // number: '',
        phone: '',
        grade: '',
        appellation: '',
        head_portrait: '',
        message: '',
        slogan: '',
        small: '',
        large: '',
        max_start: '',
        min_start: ''
      },
      showphoto: '',
      PhotoModal: false,
      up_pic_mol: false,
      temp_photo: '',
      mshow: false,
      obj: {},
      openNow: false,
      type: '',
      face_shows: false,
      filePath: '',
      upPicData: {
        fileName: '',
        filePath: ''
      },
      face_mol: false,
      fileName: '',
      code: '',
      urlcode: '',
      name: '',
      userInfo: { photo: nophoto }
    }
  },
  methods: {
    init (param) {
      console.log(param)
      getAdministrationn(param).then(ret => {
        console.log(ret.data, 'asdfg')
        // this.formItemhead_portrait
        this.formItem.id = ret.data.data.id
        this.formItem.name = ret.data.data.name
        // this.formItem.number = ret.data.data.number
        this.formItem.phone = ret.data.data.phone
        this.formItem.grade = ret.data.data.grade
        this.formItem.appellation = ret.data.data.appellation
        this.formItem.slogan = ret.data.data.slogan
        this.formItem.requirement = ret.data.data.requirement
        this.formItem.message = ret.data.data.message
        this.formItem.head_portrait = ret.data.data.head_portrait
        this.formItem.small = ret.data.data.small
        this.formItem.large = ret.data.data.large
        this.formItem.max_start = ret.data.data.max_start
        this.formItem.min_start = ret.data.data.min_start
        // this.showphoto = ret.data.data.head_portrait
        if (ret.data.data.head_portrait) {
          this.showphoto = ret.data.data.head_portrait
        } else {
          this.showphoto = this.nophoto
        }
      })
    },
    change1 (data) {
      if (data.url) {
        this.showphoto = data.url
        this.userInfo.photo = data.url
      } else {
        this.$Notice.error({ title: '拍照失败,请重新拍摄' })
      }
    },
    photoShow (val) {
      console.log(val, 'val')
      this.showphoto = val
    },
    closeHeight1 () {
      this.mshow = false
      this.openNow = false
    },
    modalChange (e) {
      this.face_shows = e
    },
    closePassWord (name) {
      this.passwordInfo.show = false
      this.$refs[name].resetFields()
    },
    preservation () {
      this.paramData.id = this.formItem.id || null
      this.paramData.name = this.formItem.name
      // this.paramData.number = this.formItem.number
      this.paramData.phone = this.formItem.phone
      this.paramData.grade = this.formItem.grade
      this.paramData.appellation = this.formItem.appellation
      this.paramData.slogan = this.formItem.slogan
      this.paramData.requirement = this.formItem.requirement
      this.paramData.message = this.formItem.message
      this.paramData.small = this.formItem.small
      this.paramData.large = this.formItem.large
      this.paramData.max_start = this.formItem.max_start
      this.paramData.min_start = this.formItem.min_start
      this.paramData.head_portrait = this.showphoto
      console.log(this.formItem.name)
      saveAdministrationn(this.paramData).then(res => {
        console.log(res, 'qwertW')
        if (res.data.errmsg === 'success') {
          this.$Notice.success({ title: '成功', desc: '' })
          // this.searchData(this.currentPageNo
        } else {
          this.$Notice.error({ title: '失败', desc: res.data.errmsg })
          // 自动刷新返回当前页
          // this.$router.go(0)
        }
      })
      console.log(that.controlData.uploadHeader)
      console.log(that.controlData.photo)
      // param.cardno = this.formItem.cardno
      // this.init(param)
    },
    updatePhoto () {
      this.up_pic_mol = true
      this.PhotoModal = false
    },
    PZPhoto () {
      if (this.severUserInfo.email === 'JieYuDevice') {
        this.face_mol = true
        this.gpy_mol = true
        this.gpy_shows = true
        // alert(123)
      } else {
        this.type = 'faceCamera'
        this.mshow = true
        this.openNow = true
        this.PhotoModal = false
      }
      this.upPicData.fileName = this.datetime2str(new Date()) + '.png'
      this.fileName = this.datetime2str(new Date()) + '.png'
      this.upPicData.filePath = 'userphoto/' + this.datetime2str(new Date())
      this.filePath = this.upPicData.filePath
      this.formItem.paramIndex = params.index
    },
    // SCPhoto () {
    //   this.up_pic_mol = true
    //   this.PhotoModal = false
    // },
    beforeUpload (file) {
      this.upPicData.fileName = this.upPicData.fileName + '.' + file.type.substring(6)
      let that = this
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        let index = reader.result.indexOf('base64,') + 7
        that.upPicData.file = reader.result.substring(index)
        that.upPic(that.upPicData)
      }
      return false
    },
    upPic (obj) {
      var time = new Date().getTime()
      this.timeStep = time.toString()
      let param = {
        filePath: obj.filePath,
        fileName: obj.fileName,
        timestamp: this.timeStep
      }
      getSign(param).then(res => {
        if (res.data.errcode === 0) {
          createUpLoadFiles(res.data.data.docking_url, { sign: res.data.data.sign, timestamp: this.timeStep, filePath: obj.filePath, fileName: obj.fileName, file: obj.file }).then(res => {
            if (res.data.errcode === 0) {
              let imgurl = res.data.data
              imgurl = imgurl.replace('http://anshandl.qstb.top:8000/', 'http://172.20.10.134:9864/')
              this.temp_photo = imgurl
              this.showphoto = imgurl
              this.userInfo.photo = imgurl
            } else {
              this.$Notice.error({ title: '上传失败', desc: res.data.data.msg })
            }
          })
        } else {
          this.$Notice.error({ title: '上传失败', desc: res.data.data.msg })
        }
      })
    },
    imgResult (data) {
      console.log(data, '!@#$')
      this.face_mol = false
      this.face_shows = false
      this.PhotoModal = false
      this.showphoto = data
      this.userInfo.photo = data
    },
    modalChange3 (e) {
      this.openNow = e
    }
  },
  mounted () {
    this.showphoto = this.nophoto
    this.init(this.param)
  },
  watch: {
    'controlData.showDetail' (val) {
      if (val) {
        this.showphoto = this.controlData.photo
        // this.controlData.idsArr[0].toString() === this.controlData.smallarealist[0].id.toString() &&
        if (this.detailAreaList.select1) {
          this.findGroupList(this.detailAreaList.select1, true)
        }
      }
    }
  }
}
</script>

<style scoped>
.bench_search {
  margin-bottom: 10px;
}
.person-info-header {
  height: 140px;
  width: 60%;
  margin: 8px auto;
}
.title-style {
  padding: 8px 12px;
  background-color: #ecf8ff;
  border-radius: 4px;
  border-left: 5px solid #50bfff;
  margin: 15px 0;
  font-size: 16px;
  width: 100%;
}
</style>
